/**
 * Created by maxiaoqiang on 2018/8/20.
 */
import React, {Component} from "react";

import {formatChar} from "util/MyUtil";

import {message, Button, Modal, TreeSelect, Input, Select, Radio, Checkbox, Icon} from 'antd';


const Option = Select.Option;
const {TextArea} = Input;

import {HttpClient} from "util/HttpClient";

import RadioCheck from "./RadioCheck";
import CheckBoxCheck from "./CheckBoxCheck";
import JudgeCheck from "./JudgeCheck";

class Question extends Component {

    constructor(props) {
        super(props);
        this.state = {
            treeData: [],
            loading: false,
            value: "请选择章节",
            data: {
                id: "",
                examSubjectId: "",
                examChapterId: "",
                name: "",
                type: "0",
                level: "1",
                score: "",
                analysis: "",
                optionList: [],
                answer: ""
            }
        }
    }

    componentDidMount() {
        if (this.props.data) {
            this.setState({
                data: this.props.data
            })
        }
        if (this.props.choose) {
            let value = this.props.choose;
            this.setState({
                value: value.indexOf("-") ? value : "请选择章节"
            });
            this.state.data["examSubjectId"] = value.split("-")[0];
            this.state.data["examChapterId"] = value.split("-")[1];
        }
        if (this.props.treeData) {
            this.setState({
                treeData: this.props.treeData
            })
        }
    };

    handleChange = (name, value)=> {
        if (name == "examChapterId") {
            this.state.data[name] = value;
            if (value.indexOf("-") > -1) {
                this.setState({value});
                this.state.data["examSubjectId"] = value.split("-")[0];
                this.state.data["examChapterId"] = value.split("-")[1];
            } else {
                this.setState({value: "请选择章节"});
            }
        } else {
            this.state.data[name] = value.trim();
        }
    };

    saveHandel = ()=> {
        let data = this.state.data;
        if (data.examSubjectId.length == 0 || data.examChapterId.id == 0) {
            message.error("章节名称不能为空");
            return;
        }
        if (data.name.length == 0) {
            message.error("题目描述不能为空");
            return;
        }
        // 如果不是简答题答案描述不能为空
        let flag = false;
        for (let i in data.optionList) {
            console.log(data.optionList[i])
            if (data.optionList[i].name.length == 0) {
                flag = true;
                break;
            }
        }
        if(this.state.data.type!=3){
            if (flag || data.optionList.length == 0) {
                message.error("选项描述不能为空");
                return;
            }

            if (data.answer.length == 0) {
                message.error("请选择正确答案");
                return;
            }
        }

        if (data.score.length == 0) {
            message.error("题目分值不能为空");
            return;
        }
        this.setState({
            loading: true
        });
        this.props.commitHandle(data);

    };

    handleCancel = (e) => {
        this.setState({
            visible: false
        });
    };

    render() {
        return (
            <div>
                <Modal
                    visible={true}
                    footer={null}
                    title={this.props.edit?"修改试题":"添加试题"}
                    closable={!this.state.loading}
                    onCancel={()=>{this.props.handleCancel()}}
                >
                    <div className="card-subject">
                        <div className="card">
                            章节名称:
                        </div>
                        <div className="card">
                            <TreeSelect
                                style={{ width: 200 }}
                                value={this.state.value}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                treeData={this.state.treeData}
                                placeholder="请选择章节"
                                treeDefaultExpandAll
                                onChange={(value)=>{this.handleChange("examChapterId",value)}}
                            />
                        </div>
                    </div>
                    <div className="card-subject">
                        <div className="card">
                            题目类型
                        </div>
                        <div className="card">
                            <Select
                                defaultValue={this.state.data.type+""}
                                style={{width:200}}
                                placeholder="请选择题目类型"
                                onChange={(value)=>{
                                        let data = this.state.data;
                                        data.type = value;
                                        data.answer = "";
                                        this.setState({
                                            data:data
                                        });
                                    }
                                }
                            >
                                <Option value="0">单选题</Option>
                                <Option value="1">多选题</Option>
                                <Option value="2">判断题</Option>
                                <Option value="3">简答题</Option>
                            </Select>
                        </div>
                    </div>
                    <div className="card-subject">
                        <div className="card">
                            难度等级
                        </div>
                        <div className="card">
                            <Select
                                defaultValue={this.state.data.level+""}
                                placeholder="请选择难度等级"
                                style={{width:200}}
                                onChange={(value)=>{
                                        this.handleChange("level",value)
                                    }
                                }
                            >
                                <Option value="0">简单</Option>
                                <Option value="1">一般</Option>
                                <Option value="2">难</Option>
                                <Option value="3">困难</Option>
                            </Select>
                        </div>
                    </div>
                    <div className="card-category">
                        <div>
                            题目描述
                        </div>
                        <div>
                            <TextArea
                                defaultValue={(this.state.data.name && this.state.data.name.length)>0?this.state.data.name:""}
                                className="question-input"
                                placeholder="请输入题目描述"
                                autosize={{ minRows: 2, maxRows: 6 }}
                                onChange={(e)=>{
                                    this.handleChange("name",e.target.value)
                                }}
                            />
                        </div>
                    </div>
                    {this.state.data.type != 3 ?
                        <div className="card-subject">
                            <div className="card">
                                题目答案
                            </div>
                            <div className="card">
                                {this.state.data.type == 0 ?
                                    <RadioCheck
                                        answer={this.state.data.answer}
                                        optionList={this.state.data.optionList}
                                        changeValue={(name, value)=>{this.state.data[name] = value}}
                                    />
                                    :
                                    null
                                }
                                {this.state.data.type == 1 ?
                                    <CheckBoxCheck
                                        answer={this.state.data.answer}
                                        optionList={this.state.data.optionList}
                                        changeValue={(name, value)=>{this.state.data[name] = value}}
                                    />
                                    :
                                    null
                                }
                                {this.state.data.type == 2 ?
                                    <JudgeCheck
                                        answer={this.state.data.answer}
                                        optionList={this.state.data.optionList}
                                        changeValue={(name, value)=>{this.state.data[name] = value}}
                                    />
                                    :
                                    null
                                }
                            </div>
                        </div>
                        :
                        null
                    }
                    <div className="card-category">
                        <div>
                            题目分值
                        </div>
                        <div>
                            <Input
                                defaultValue={(this.state.data.score && this.state.data.score.length)>0?this.state.data.score:""}
                                className="question-input"
                                placeholder="请输入题目分值(错误得分/总分值 如0/5)"
                                onChange={(e)=>{
                                    this.handleChange("score",e.target.value)
                                }}
                            />
                        </div>
                    </div>
                    <div className="card-category">
                        <div>
                            解析参考
                        </div>
                        <div>
                            <TextArea
                                defaultValue={(this.state.data.analysis && this.state.data.analysis.length)>0?this.state.data.analysis:""}
                                className="question-input"
                                placeholder="请输入解析参考"
                                autosize={{ minRows: 3, maxRows: 6 }}
                                onChange={(e)=>{
                                    this.handleChange("analysis",e.target.value)
                                }}
                            />
                        </div>
                    </div>

                    <div className="submit-div">
                        <Button
                            loading={this.state.loading}
                            type="primary"
                            onClick={this.saveHandel}
                        >
                            {this.props.edit ? "修改" : "保存"}
                        </Button>
                    </div>
                </Modal>
            </div>
        )
    }

}

export default Question;